<template>
    <div class="">
        <Breadcrumb :route="routes" />
        <div class="wb-container">
            <div class="mian-content">
                <div class="Withdrawa-content">
                    <div class="alert alert-primary">
                        <p>
                            <b>商家添加提现银行卡</b>
                        </p>
                        <p>
                            商家添加银行卡用于商户资金提现，必须添加了银行卡后才能进行商户提现
                            <br>
                            请填写正确的银行卡号和开户行信息
                        </p>
                    </div>
                    <div class="addBankCard">
                        <el-row>
                            <el-col :span="4">
                                <div class="addBankCard-title">银行卡信息</div>
                            </el-col>
                            <el-col :span="12">
                                <div>
                                    <el-form :model="form" label-width="120px" :rules="rules" ref="formRef"
                                        class="addBankCard-form">
                                        <el-form-item label="银行卡卡号:" prop="bank_card_number">
                                            <el-input v-model="form.bank_card_number" placeholder="输入16-19位银行卡号" />
                                        </el-form-item>
                                        <el-form-item label="开户行名称:" prop="bank_name">
                                            <el-input v-model="form.bank_name" placeholder="输入银行卡的开户行" />
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button @click="resetForm(formRef)">取消</el-button>
                                            <el-button type="primary" @click="onSubmit">{{ onSubmitText }}</el-button>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import Breadcrumb from '@/components/nav-header'
import { addBankCard } from '@/api/finance'
import { useStore } from 'vuex';

const route = useRoute()
const routes = ref()
const store = useStore()
const user = ref(JSON.parse(store.state.UserInfo))
const onSubmitText = ref('')
const isShow = ref(false)
const formRef = ref('')
const form = reactive({
    bank_card_number: '',
    bank_name: ''
})
const rules = reactive({
    bank_card_number: [
        { required: true, message: '输入16-19位银行卡号', trigger: 'blur' },
        { pattern: /^(\d{16}|\d{19}|\d{17}|\d{18})$/, message: '输入16-19位银行卡号', trigger: ['blur', 'change'] }
    ],
    bank_name: [
        { required: true, message: '输入开户行名称', trigger: 'blur' },
        { pattern: /^[\u4e00-\u9fa5a-zA-Z]{0,}$/, message: '输入正确的开户行名称', trigger: ['blur', 'change'] }
    ]
})

onMounted(() => {
    routes.value = route.matched
    console.log(user.value);
    if (user.value.bank_card_number && user.value.bank_name) {
        isShow.value = false
        form.bank_card_number = user.value.bank_card_number
        form.bank_name = user.value.bank_name
        onSubmitText.value = '修改'
    } else {
        isShow.value = true
        onSubmitText.value = '添加'

    }
})
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
const onSubmit = async () => {
    const result = await addBankCard(form).then(res => {
        if (res == 1) {
            ElMessage.success('银行卡添加成功')
            form.bank_card_number = '',
                form.bank_name = ''
        }
    })
}
</script>
<style lang="less" scoped>
.Withdrawa-content {
    margin-top: 20px;
    height: 700px;
}

.Withdrawa-content .Withdrawal::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background-color: rgba(0, 0, 0, 0.1);
}

.Withdrawa-content .Withdrawal::-webkit-scrollbar-thumb {
    background-color: #888;
}

.Withdrawa-content .Withdrawal::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}

.addBankCard {
    background: #f8f8f8;
    margin-bottom: 10px;
    padding: 0 10px;
}

.addBankCard-title {
    text-align: center;
    padding-top: 20px;
    font-size: 14px;
    color: #333;
    font-weight: bold;
    padding: 20px 0;

}

.addBankCard-form {
    border-left: 3px solid #fff;
    padding: 10px 10px;
}
</style>

